<template>
  <view class="container" :style="{ height: height + 'px' }">
    <view class="search">
      <search class="fl2 search-input" :val.sync="keyword" @change="goSearch" />
      <view class="primary_btn fl1" @tap="add"> 新增费用 </view>
    </view>
    <checkbox-group placement="column" @change="checkboxChange">
      <view v-for="(item, index) in list" :key="index" class="item-wrap">
        <view class="flex">
          <label @click="itemSelect(item)"> <checkbox :checked="item.isSelect" color="#1a8bff" />{{ item.name }} </label>
          <input type="text" placeholder="请输入" class="taxAmount fl1" v-if="item.isSelect" v-model="item.taxAmount" />
        </view>
        <view v-if="item.isSelect">
          <u-line margin="20rpx 0rpx"></u-line>
          <view class="flex">
            <view>备注</view>
            <input type="text" class="remark fl1" placeholder="请输入" v-model="item.remark" />
          </view>
        </view>
      </view>
    </checkbox-group>
    <view class="bottom">
      <button class="btn back" @click="back">取消</button>
      <button class="btn" @click="submit">确认</button>
    </view>
  </view>
</template>

<script>
import { getUserInfo } from '@/service/auth'
import { basSubject } from '@/service/api/shopping'
import Search from '@/components/search.vue'
export default {
  components: { Search },
  data() {
    return {
      list: [],

      detailItem: {
        subjectId: '',
        subjectName: '',
        taxAmount: 0,
        remark: '',
      },
      detailList: [],
      keyword: '',
    }
  },
  onShow() {
    uni.$on('refreshSubData', res => {
      if (res.refresh) {
        this.refreshData()
      }
    })
  },
  onReady() {},
  created() {},
  onLoad(option) {
    this.getList()
    this.user = getUserInfo()
  },
  methods: {
    goSearch() {
      console.log(this.keyword)
      this.refreshData()
    },
    refreshData() {
      this.list = []
      this.getList()
    },
    itemSelect(item) {
      console.log('item' + JSON.stringify(item))
      item.isSelect = !item.isSelect
    },
    checkboxChange(n) {
      console.log('change' + this.detailList)
    },
    back() {
      uni.navigateBack({
        delta: 1,
      })
    },
    getList() {
      this.uniShowLoading()
      basSubject({ page: 1, size: 999 })
        .then(res => {
          this.uniHideLoading()
          this.list = res.content
          this.list.forEach(item => {
            this.$set(item, 'isSelect', false)
            this.$set(item, 'remark', '')
            this.$set(item, 'taxAmount', 0)
          })
        })
        .catch(err => {
          this.uniHideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    submit() {
      const _this = this

      _this.list.forEach(item => {
        if (item.isSelect) {
          _this.detailItem.subjectId = item.id
          _this.detailItem.subjectName = item.name
          _this.detailItem.remark = item.remark
          _this.detailItem.taxAmount = item.taxAmount
          _this.detailList.push(JSON.parse(JSON.stringify(_this.detailItem)))
        }
      })
      if (_this.detailList.length == 0) {
        uni.showToast({
          title: '请选择费用',
          icon: 'none',
        })
        return
      }
      const eventChannel = _this.getOpenerEventChannel()
      eventChannel.emit('acceptDataFromOpenedPage', { data: _this.detailList })
      uni.navigateBack({
        delta: 1,
      })
    },
    add() {
      uni.navigateTo({
        url: `/packagePurchase/pages/record/addSubject`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f4f5f9;
  padding: 20rpx;
  font-size: 28rpx;
  height: 100vh;
  .search {
    display: flex;
    margin: 0 20rpx 20rpx;
    .search-input {
      margin-right: 20rpx;
    }
    .primary_btn {
      margin-left: 20rpx;
    }
  }
  .item-wrap {
    background-color: white;
    padding: 20rpx;
    margin-bottom: 20rpx;
  }
  .num {
    border: 1rpx solid #f4f5f9;
    flex: 1;
    margin-left: 20rpx;
    padding: 5rpx 5rpx;
    font-size: 26rpx;
  }
  .remark {
    text-align: right;
  }
  .taxAmount {
    text-align: right;
  }
  .bottom {
    display: flex;
    align-items: center;
    position: absolute;
    height: 150rpx;
    bottom: 0;
    background-color: white;
    left: 0;
    right: 0;
    .btn {
      background-color: #2f6fef;
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      color: white;
      border-radius: 50rpx;
      margin-left: 20rpx;
      margin-right: 20rpx;
      font-size: 28rpx;
    }
    .back {
      background-color: white;
      color: #333;
      border: 1rpx solid #cbd2de;
    }
  }
}
</style>
